<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .big-box{
            width:400px;
            height: 400px;
            background: blue;
        }
        .small-box{
            width:100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 调查问卷 
            事件修饰符：.prevent 阻止浏览器的默认事件  .stop 阻止冒泡  .once 只触发一次 
            
            .self  只在自身触发

            表单修饰符：.trim  去空格  .number 只能输入数字  .lazy  

            按键修饰符：.enter  .alt .shift .ctrl  .13 .14 .15
        -->
        <form action="">
            姓名: <input type="text" placeholder="请输入姓名" v-model.trim.lazy="params.name"><br>
            年龄：<input type="text" placeholder="请输入年龄" v-model.trim.number="params.age"><br>
            性别：<input type="radio" name="sex" value="男" v-model="params.sex">男
            <input type="radio" name="sex" value="女" v-model="params.sex">女<br>
            爱好：<ul>
                <li v-for="item in hobby">
                    <input type="checkbox" v-model="params.hobby" :value="item">{{item}}
                </li>
            </ul>
            地址：<select v-model="params.address">
                <option v-for="item in address">{{item}}</option>
            </select>
            建议：<textarea name="" id="" cols="30" rows="10" v-model="params.suggest"></textarea>
            {{params}}
            <button type="submit" @click.prevent="sub">提交</button>
        </form>

        <div class="big-box" @click.self="big">
            <div class="small-box" @click="small"></div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                hobby:['篮球','逛街','爬山','读书'],
                address:['北京','上海','宿迁'],
                params:{
                    name:'',
                    age:'',
                    sex:'',
                    hobby:[],
                    address:'',
                    suggest:''
                }
            },
            methods:{
                sub(e){
                    // e.preventDefault();
                },
                small(){
                    console.log("small")
                },
                big(){
                    console.log("big")
                }
            }
        })
    </script>
</body>
</html>